<template>
  <div class="project-form-box">
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">土地信息</div>
        <el-form ref="landInfo" class="form-wrap" label-position="top" size="small" :model="propForm.landInfo" :rules="landInfo_rules">
          <el-form-item label="宗地号" prop="parcelNum">
            <el-input maxlength="30" placeholder="请输入" v-model="propForm.landInfo.parcelNum" @change="landCodeOnly"></el-input>
          </el-form-item>
          <el-form-item label="宗地面积(m²)" prop="parcelArea">
            <el-input maxlength="20" placeholder="请输入" v-model="propForm.landInfo.parcelArea"></el-input>
          </el-form-item>
          <el-form-item label="土地用途" prop="landUse">
            <el-select placeholder="请选择" v-model="propForm.landInfo.landUse">
              <el-option v-for="item in landUses" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业地址" prop="cityCode" class="full">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-select placeholder="请选择市" v-model="propForm.landInfo.cityCode">
                  <el-option v-for="item in cityAssembly" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择区" v-model="propForm.landInfo.countyCode" @change="handleChangeCountyCode">
                  <el-option
                    v-for="item in (this.propForm.landInfo.cityCode === '') ? [] : districtCollection"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择街道" v-model="propForm.landInfo.street" @change="handleChangeStreet">
                  <el-option
                    v-for="item in (this.propForm.landInfo.countyCode === '') ? [] : projectStreet"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择社区" v-model="propForm.landInfo.community">
                  <el-option
                    v-for="item in (this.propForm.landInfo.street === '') ? [] : communityNameStreet"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-input maxlength="50" placeholder="请输入道路及门牌号" v-model="propForm.landInfo.addressInfo" @change="handleValidateProject"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">项目信息</div>
        <el-form ref="propertyBasic" label-position="top" class="form-wrap" size="small" :model="propForm.propertyBasic" :rules="propertyBasic_rules">
          <el-form-item label="项目编号" prop="projectCode" v-if="isEdit">
            <el-input placeholder="请输入" readonly="readonly" v-model="propForm.propertyBasic.projectCode"></el-input>
          </el-form-item>
          <el-form-item label="项目国家编号" prop="projectCountryCode">
            <el-input maxlength="100" @change="validateProjectCountryCode" placeholder="请输入" v-model="propForm.propertyBasic.projectCountryCode"></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-input placeholder="请输入" v-model="propForm.propertyBasic.projectName"></el-input>
          </el-form-item>
          <el-form-item label="项目面积(m²)" prop="projectArea">
            <el-input placeholder="请输入" v-model="propForm.propertyBasic.projectArea"></el-input>
          </el-form-item>
          <el-form-item label="项目类型" prop="projectType">
            <el-select placeholder="请选择" v-model="propForm.propertyBasic.projectType">
              <el-option v-for="item in projectType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理权属" prop="manageUnit">
            <el-select placeholder="请选择管理权属" v-model="propForm.propertyBasic.manageUnit">
              <el-option v-for="item in manageUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否为更新项目" prop="isUpdate">
            <el-radio-group v-model="propForm.propertyBasic.isUpdate" size="small" :disabled="addSource">
              <el-radio label="2">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开发单位">
            <el-input maxlength="30" placeholder="请输入" v-model="propForm.propertyBasic.constructionUnit"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input maxlength="30" placeholder="请输入" v-model="propForm.propertyBasic.contactName"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input maxlength="30" placeholder="请输入" v-model="propForm.propertyBasic.contactPhone"></el-input>
          </el-form-item>
          <el-form-item label="当前阶段">
            <el-input maxlength="30" :readonly="true" placeholder="请输入" v-model="propForm.propertyBasic.stage"></el-input>
          </el-form-item>
          <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
            <button type="button" @click="$refs.positionDialog.show()" style="position: absolute;top: -35px;left: 70px;">选择</button>
            <el-input v-model="propForm.propertyBasic.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location"></el-input>
          </el-form-item>
          <el-form-item label="备注" class="full">
            <el-input maxlength="200" placeholder="请输入" v-model="propForm.propertyBasic.remarks"></el-input>
          </el-form-item>
        </el-form>
        <!-- 地图坐标选择弹窗 -->
        <positionDialog ref="positionDialog" @changeMessage="resetPosition" />
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">物业信息</div>
        <div class="table-planning">
          <el-button type="primary" plain icon="el-icon-plus" class="planning-button" @click="superInforAdd">添加</el-button>
          <el-table :data="propForm.supportingFacilities" align="center">
            <el-table-column prop="propertyName" label="物业名称" width="120"></el-table-column>
            <el-table-column prop="projectType" label="物业类型" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="projectSubclassType" label="物业规划" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="floorSpace" label="占地面积(m²)" width="120"></el-table-column>
            <el-table-column prop="buildArea" label="建筑面积(m²)" width="120"></el-table-column>
            <el-table-column prop="transferMode" label="移交方式" width="120">
              <template slot-scope="scope">
                <span>{{getCardTypeValue(scope.row.transferType,transferModeOption)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" width="120">
              <template slot-scope="scope">
                <span :title="scope.row.remarks">{{scope.row.remarks | ellipsis}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClickEdit(scope)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, propForm.supportingFacilities)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">资料信息</div>
        <div class="material">
          <el-tabs v-model="milestoneSort" @tab-click="handleClick">
            <el-tab-pane
              :name="item.milestoneSort.toString()"
              :disabled="index > activeIndex"
              :key="item.milestoneSort"
              v-for="(item, index) in propForm.projectMilestones"
            >
              <span slot="label">
                <div class="tabRadius">{{ item.milestoneSort }}</div>
                <div>{{ item.milestoneName }}</div>
              </span>
              <el-table :data="item.materialsFormVoList" class="material-table" align="center" style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column prop="sort" label="序号" width="60"></el-table-column>
                <el-table-column prop="materialsName" label="材料名称" width="120">
                  <template slot-scope="scope">
                    <div v-html="scope.row.materialsName"></div>
                  </template>
                </el-table-column>
                <el-table-column prop="fileBusId" label="文件名称" width="160">
                  <template slot-scope="scope">
                    <el-row :gutter="10">
                      <el-col :xs="6" :sm="7" :md="7" :lg="7" :xl="7">
                        <div class="grid-content bg-purple" style="line-height: 40px">
                          <el-upload
                            v-if="isUpload[scope.$index]"
                            class="upload-demo"
                            action="/admin/sys-file/upLodeFileAdd"
                            :auto-upload="true"
                            :data="httpRequestData"
                            :before-remove="beforeRemove"
                            :show-file-list="false"
                            :http-request="(params)=>{httpRequest(params, scope)}"
                            :file-list="httpRequestFileLis"
                          >
                            <el-button size="small" icon="el-icon-upload">上传文件</el-button>
                          </el-upload>
                          <el-button v-else disabled size="small" icon="el-icon-upload">上传文件</el-button>
                        </div>
                      </el-col>
                      <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
                        <div class="grid-content bg-purple-light" style="line-height: 40px">
                          <span>
                            {{scope.row.original}}
                            <i
                              v-if="scope.row.original"
                              class="el-icon-close"
                              style="margin-left: 5px;cursor: pointer;font-weight: bold"
                              @click="triggerBeforeRemove(scope)"
                            ></i>
                            <i
                              v-if="scope.row.original"
                              class="el-icon-download"
                              style="margin-left: 10px;cursor: pointer;font-weight: bold"
                              @click="triggerBeforeDownload(scope)"
                            ></i>
                          </span>
                        </div>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="120">
                  <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.remarks" placeholder="请输入内容" maxlength="200"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <el-button type="primary" plain class="planning-button" v-throttle="[()=>handlePreservation('propForm')]">保存</el-button>
      </div>
    </div>
    <supportFacilityInformation
      ref="supportFacilityInformation"
      @handleDialogsSave="handleDialogsSave"
      @handleClose="handleClose"
      v-if="editDataShow"
      @beforeClose="handleClose"
    ></supportFacilityInformation>
    <!-- 图片、文档预览弹窗 -->
    <el-dialog :visible.sync="dialogVisibleView" append-to-body :close-on-click-modal="false">
      <img width="100%" :src="previewUrl" alt v-if="previewType === 'image'" />
      <vPdf :fileId="previewUrl" v-else-if="previewType === 'pdf'" />
    </el-dialog>
  </div>
</template>

<script src="./project_form.js">

</script>

<style scoped lang="scss">
.project-form-box {
  @include formWrap(4);
  .resource-manage {
    margin: 20px;
    .card-box {
      padding: 16px 24px;
      overflow: hidden;
      .planning-button {
        margin: 10px;
        float: right;
      }
      .material {
        padding: 20px;
        .material-table {
          margin: 20px 0;
          position: relative;
        }
      }
      //里程碑样式-开始
      /deep/ .el-tabs__header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      /deep/ .el-tabs__item {
        margin: 0 50px;
        .tabRadius {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      /deep/ .el-tabs__active-bar {
        height: 0;
        background-color: #fff;
      }
      /deep/ .el-tabs__nav-wrap::after {
        left: 50px;
        bottom: 50px;
        width: calc(100% - 120px);
      }
      //里程碑样式-结束
    }
  }
}
</style>
